<template>
    <div>
        <page-header title="欢迎使用">
            <template #content>
                <div>
                    这是头部信息
                </div>
            </template>
          
        </page-header>
        <el-row :gutter="10" style="margin: 0 10px;">
            <el-col :lg="24"> 
                <page-main title="" style="margin: 0 0 20px 0; height: 100%;">
                       <div  style="margin: 0 0 10px 0;">
                           <el-button-group>
                          <el-button type="success" @click="dialogFormVisible = true">创建扫描</el-button>
                          <el-button type="primary" @click="getState" >获取状态</el-button>
                          <el-button type="primary" @click="submitRules" >传入测量标准</el-button>
                          <el-button type="primary" @click="getResult" >查看报表</el-button>
                          <el-button type="primary" @click="getModel" >查看模型</el-button>
                          <el-button type="primary" @click="getWord" >查看word</el-button>

                        </el-button-group>
                      </div>
                       
                      <el-dialog title="创建任务" :visible.sync="dialogFormVisible">
                        
                        <el-form :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm">

                          <el-form-item label="房间名"  prop="taskId">
                            <el-input v-model="ruleForm.taskId" autocomplete="off"></el-input>
                          </el-form-item>
                          <!-- <el-form-item label="项目"  prop="project" >
                            <el-input v-model="ruleForm.project" autocomplete="off"></el-input>
                          </el-form-item>

                          <el-form-item label="楼房"  prop="building">
                            <el-input v-model="ruleForm.building" autocomplete="off"></el-input>
                          </el-form-item>

                         <el-form-item label="套房"  prop="suite" >
                            <el-input v-model="ruleForm.suite" autocomplete="off"></el-input>
                          </el-form-item>

                          <el-form-item label="房间"  prop="room" >
                            <el-input v-model="ruleForm.room" autocomplete="off"></el-input>
                          </el-form-item>

                         <el-form-item label="阶段"  prop="stage" >
                            <el-input v-model="ruleForm.stage" autocomplete="off"></el-input>
                          </el-form-item> -->

                        <el-form-item > 
                          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                          <el-button @click="resetForm('ruleForm')">重置</el-button>
                          <el-button @click="dialogFormVisible = false">取 消</el-button>
                        </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                        </div>
                      </el-dialog>

                 <div id="content">
                <table id="myTable" lay-filter="myTable"></table>
                 </div>

                </page-main>          
            </el-col>
        </el-row>
    </div>
</template>

<script>
import msApi from "@/api/msApi";
  export default {
    name: "test",
    data() {
      return {    
         dialogFormVisible: false,
            ruleForm: {
                taskId: '',             
          },
            rules: {
                   taskId: [
                  { required: true, message: '请输入!', trigger: 'blur' },
                  { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
                ] 
        },
      }
    },
   		created() {  
       },
    
      mounted() {
               layui.use(['form', 'table','soulTable','FileSaver','wordexport'], function () {
              var table = layui.table,
              soulTable = layui.soulTable
              , FileSaver = layui.FileSaver
	            , wordexport = layui.wordexport

            var myTable =  table.render({
                elem: '#myTable'
                ,toolbar: '<div><a class="layui-btn layui-btn-sm" lay-event="export"><i class="layui-icon layui-icon-download-circle"></i>导出所有数据</a></div>'
                ,defaultToolbar: ['print', 'exports','filter']           
                ,cols: [
                [
                   {align: 'center', width: '100', field: '', title: '空间尺寸', colspan:'24'} //rowspan 合并行]
                  ,{align: 'center', width: '100', field: '', title: '门窗尺寸', colspan:'7'} //rowspan 合并行]
                ],
                [
                {align: 'center', width: '100', field: 'room', title: '房间编号', rowspan:'3'}
                ,{align: 'center', width: '100', field: '', title: '推算值', colspan: '3'}
                ,{align: 'center', width: '100', field: '', title: '实测值', colspan:'14'} //rowspan 合并行]
                ,{align: 'center', width: '100', field: '', title: '计算值', colspan:'6'} //rowspan 合并行] 
                ,{align: 'center', width: '100', field: 'door', title: '门窗编号', rowspan:'3'} //rowspan 合并行] 
                ,{align: 'center', width: '100', field: '', title: '推算值', colspan:2} //rowspan 合并行]
                ,{align: 'center', width: '100', field: '', title: '实测值', colspan:2} //rowspan 合并行] 
                ,{align: 'center', width: '100', field: '', title: '计算值', colspan:2} //rowspan 合并行] 
                ],
                [
                  {align: 'center', width: '100', field: 'H', title: '净高', rowspan:'2' }
                  ,{align: 'center', width: '100', field: 'L1', title: 'L1',rowspan:'2'}
                  ,{align: 'center', width: '100', field: 'L2', title: 'L2',rowspan:'2'}
                  ,{align: 'center', width: '100', field: '', title: '东墙', colspan: '2'}
                  ,{align: 'center', width: '100', field: '', title: '西墙', colspan: '2'}
                  ,{align: 'center', width: '100', field: '', title: '北墙', colspan: '2'}
                  ,{align: 'center', width: '100', field: '', title: '南墙', colspan: '2'}
                  ,{align: 'center', width: '100', field: '', title: '房顶'}
                  ,{align: 'center', width: '100', field: '', title: '地面'}
                  ,{align: 'center', width: '100', field: '', title: '阴阳角',colspan:'4'}
                  ,{align: 'center', width: '100', field: '', title: '净高', colspan: '2'}
                  ,{align: 'center', width: '100', field: '', title: '净开间', colspan: '2'}
                  ,{align: 'center', width: '100', field: '', title: '净进深', colspan: '2'}
                  ,{align: 'center', width: '100', field: 'door_tg', title: '高度', rowspan: 2}
                  ,{align: 'center', width: '100', field: 'door_tk', title: '宽度', rowspan: 2}
                  ,{align: 'center', width: '100', field: 'door_sg', title: '高度', rowspan: 2}
                  ,{align: 'center', width: '100', field: 'door_sk', title: '宽度', rowspan: 2}
                  ,{align: 'center', width: '100', field: 'door_jg', title: '高度偏差', rowspan: 2}
                  ,{align: 'center', width: '100', field: 'door_jk', title: '宽度偏差', rowspan: 2}              
                  ],
                [
                   {align: 'center', width: '100', field: 'ewalls_p', title: '平整度'}
                  ,{align: 'center', width: '100', field: 'ewalls_c', title: '垂直度'}
                  ,{align: 'center', width: '100', field: 'wwalls_p', title: '平整度'}
                  ,{align: 'center', width: '100', field: 'wwalls_c', title: '垂直度'}                  
                  ,{align: 'center', width: '100', field: 'nwalls_p', title: '平整度'}
                  ,{align: 'center', width: '100', field: 'nwalls_c', title: '垂直度'}                 
                  ,{align: 'center', width: '100', field: 'swalls_p', title: '平整度'}
                  ,{align: 'center', width: '100', field: 'swalls_c', title: '垂直度'}
                  ,{align: 'center', width: '100', field: 'ceiling_s', title: '水平极差'}
                  ,{align: 'center', width: '100', field: 'floor_p', title: '平整度'}
                  ,{align: 'center', width: '100', field: 'multiwalls_en', title: '东北'}
                  ,{align: 'center', width: '100', field: 'multiwalls_wn', title: '西北'}
                  ,{align: 'center', width: '100', field: 'multiwalls_es', title: '东南'}
                  ,{align: 'center', width: '100', field: 'multiwalls_ws', title: '西南'}
                  ,{align: 'center', width: '100', field: 'heigth_z', title: '最大偏差',}
                  ,{align: 'center', width: '100', field: 'heigth_j', title: '极差',}
                  ,{align: 'center', width: '100', field: 'bay_z', title: '最大偏差', }
                  ,{align: 'center', width: '100', field: 'bay_j', title: '极差',}
                  ,{align: 'center', width: '100', field: 'depth_z', title: '最大偏差'}
                  ,{align: 'center', width: '100', field: 'depth_j', title: '极差'}
               ]]  
                ,data: []
                ,height: 500
                ,excel: {filename: '复杂表头导出.xlsx'}
                ,done: function () {
                    soulTable.render(this)
                  }
                });

            table.on('toolbar(myTable)', function(obj){
              if (obj.event === 'export') {
                  // soulTable.export(myTable, {
                  //   filename: '导出数据.xlsx'
                  // });
                   $("#content").wordExport("报表")

                }
            });
            })
      },

    methods:{
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              try {
              msApi.scan(this.ruleForm)
              this.$message.info('开始扫描'+this.ruleForm.taskId)
              this.dialogFormVisible = false    
            }catch (err) {
              console.log(err);
              this.$message.error('网络异常')
           }
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      getState(){//获取当前状态
         this.$prompt('请输入任务Id', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async({ value }) => {
              try {
              const res = await msApi.queryState(value)
              this.$message({
                showClose: true,
                dangerouslyUseHTMLString: true,
                message: '<strong>任务Id：</strong>'+res.data.data.taskId
                +'</br></br><strong>状态 ：</strong>'+res.data.data.state
                +'</br></br><strong>进度 ：</strong>'+res.data.data.progress+'%'
              });
            }catch (err) {
              console.log(err);
              this.$message.error('网络异常')
             }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },

      submitRules(){//上传测量标准
         this.$prompt('请输入任务Id', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async({ value }) => {
              try {
              const res = await msApi.submitRules(value)
              this.$message.success("传入成功");
            }catch (err) {
              console.log(err);
              this.$message.error('网络异常')
             }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    async getResult(){//获取报表
              try {
              const res = await msApi.getResult()
              // this.total = res.body.count;
              // this.currentPage = res.body.curr;
              var arr = new Array(3);
              // console.log(res.data);
              console.log(res.data.data);
              let _walls = res.data.data.walls;
              let wall_info = res.data.data.wall_info;
              let ewalls_p = '无数据',swalls_p = '无数据',wwalls_p = '无数据',nwalls_p = '无数据';
              let ewalls_c = '无数据',swalls_c = '无数据',wwalls_c = '无数据',nwalls_c = '无数据';
              let ceiling_s = '无数据',floor_p = '无数据';
              let bay_z = '无数据',bay_j = '无数据',depth_z = '无数据',depth_j = '无数据',heigth_z= '无数据',heigth_j = '无数据';
              let multiwalls_en = '无数据',multiwalls_wn = '无数据',multiwalls_es = '无数据',multiwalls_ws = '无数据'
              // let eastWall,southWall,westWall,northWall;
              //仅考虑一个方向只有一堵墙的方正毛坯房的情况
              if(Object.keys(res.data.data.wall_info).length>4){
                this.$message.error('测量数据有问题，超过4堵墙了');
                return;
              }
              let wall_map = new Map();
              for(const i in wall_info){
                switch(wall_info[i]){
                  case 'E':
                    wall_map.set("E",i);
                    if(_walls[i]==undefined){
                      continue;
                    }
                    const eastWall = _walls[i].measurements;
                    for(const key in eastWall){
                      switch(eastWall[key].id){
                        case "2":
                          ewalls_p = eastWall[key].value;
                          break;
                        case "3":
                          ewalls_c = eastWall[key].value;
                          break;
                      }
                    }
                    break;
                  case 'S':
                    wall_map.set("S",i)
                    if(_walls[i]==undefined){
                      continue;
                    }
                    const southWall = _walls[i].measurements;
                    for(const key in southWall){
                      switch(southWall[key].id){
                        case "2":
                          swalls_p = southWall[key].value;
                          break;
                        case "3":
                          swalls_c = southWall[key].value;
                          break;
                      }
                    }
                    break;
                  case 'W':
                    wall_map.set("W",i);
                    if(_walls[i]==undefined){
                      continue;
                    }
                    const westWall = _walls[i].measurements;
                    for(const key in westWall){
                      switch(westWall[key].id){
                        case "2":
                          wwalls_p = westWall[key].value;
                          break;
                        case "3":
                          wwalls_c = westWall[key].value;
                          break;
                      }
                    }
                    break;
                  case 'N':
                    wall_map.set("N",i);
                    if(_walls[i]==undefined){
                      continue;
                    }
                    const northWall = _walls[i].measurements;break;
                    break;
                }
              }
              // console.log(wall_map);
              // console.log(wall_info);
              // console.log(res.data.data.wall_info.length);
              // console.log(Object.keys(res.data.data.wall_info))

              //处理天花板水平极差数据
              // console.log(res.data.data.room.measurements)
              const ceiling_info = res.data.data.ceiling.measurements;
              for(let i in ceiling_info){
                if(ceiling_info[i].id=="4"){
                  ceiling_s = ceiling_info[i].value;  //这是一个array
                  const _ceilingMax = Math.max(...ceiling_s);
                  const _ceilingMin = Math.min(...ceiling_s);
                  ceiling_s = _ceilingMax - _ceilingMin;
                }
              }
              //处理地板平整度数据
              const floor_info = res.data.data.floor.measurements;
              for(let i in floor_info){
                if(floor_info[i].id=="4"){
                  floor_p = floor_info[i].value; 
                }
              }
              //处理阴阳角数据
              const multiwalls_info = res.data.data.multiwalls;
              
              const room_info = res.data.data.room.measurements;
              for(let i in room_info){
                //id=21,净开间、净深最大值最小值
                if(room_info[i].id=="21"){
                  let bay_depth_arr = room_info[i].value;
                  //防止没测出数据，最大最小都为0的情况
                  if(bay_depth_arr[1]!=0 && bay_depth_arr[0]!=0){
                    //净开间极差
                    bay_j = bay_depth_arr[1]-bay_depth_arr[0];
                    // console.log(bay_j)
                  }
                  if(bay_depth_arr[3]!=0 && bay_depth_arr[2]!=0){
                    //净深极差
                    depth_j = bay_depth_arr[3]-bay_depth_arr[2];
                    // console.log(depth_j)
                  }
                }
                //id=8,净开间偏差
                if(room_info[i].id=="8"){
                  const bay_z_arr = room_info[i].value;
                  bay_z = bay_z_arr;
                }
                //id=8,净深偏差
                if(room_info[i].id=="9"){
                  const depth_z_arr = room_info[i].value;
                  depth_z = depth_z_arr;
                }
                //id=6,净高偏差
                if(room_info[i].id=="6"){
                  const heigth_arr = room_info[i].value;
                  heigth_z = heigth_arr;
                }
              }

              for(var i=0;i<3;i++){        
                  arr[i] = new Array(40);
                for(var j=0;j<40;j++){
                    arr[i]['H'] = 1;arr[i]['L1'] = 1;arr[i]['L2'] = 1;
                    arr[i]['ewalls_p'] = ewalls_p;
                    arr[i]['ewalls_c'] = ewalls_c;
                    arr[i]['wwalls_p'] = wwalls_p;
                    arr[i]['wwalls_c'] = wwalls_c;
                    arr[i]['nwalls_p'] = nwalls_p;
                    arr[i]['nwalls_c'] = nwalls_c;
                    arr[i]['swalls_p'] = swalls_p;
                    arr[i]['swalls_c'] = swalls_c;
                    arr[i]['ceiling_s'] = ceiling_s;
                    arr[i]['floor_p'] = floor_p;
                    arr[i]['heigth_z'] = heigth_z;
                    arr[i]['heigth_j'] = heigth_j;
                    arr[i]['bay_z'] = bay_z;
                    arr[i]['bay_j'] = bay_j;
                    arr[i]['depth_z'] = bay_z;
                    arr[i]['depth_j'] = depth_j;
                    arr[i]['multiwalls_en'] = multiwalls_en;
                    arr[i]['multiwalls_wn'] = multiwalls_wn;
                    arr[i]['multiwalls_es'] = multiwalls_es;
                    arr[i]['multiwalls_ws'] = multiwalls_ws;

                    arr[i]['door_tg'] = multiwalls_ws;
                    arr[i]['door_tk'] = multiwalls_ws;
                    arr[i]['door_sg'] = multiwalls_ws;
                    arr[i]['door_sk'] = multiwalls_ws;
                    arr[i]['door_jg'] = multiwalls_ws;
                    arr[i]['door_jk'] = multiwalls_ws;
                }
            }
            // console.log(arr)   
            var l=arr.length;
            var itemArray = new Array();
            for(var i=0;i<l;i++){
               window["itemsObj"+(i+1)]=new Object();
              for(var key in arr[i]){
                window["itemsObj"+(i+1)][key]=arr[i][key];
              }
              itemArray[i]=window["itemsObj"+(i+1)];
            }
            // console.log(itemArray)   
             layui.use('table', function(){
              let table = layui.table;
                table.reload('myTable', {
                data:itemArray      
                }
              )
              }) 
            }catch (err) {
              console.log(err);
              this.$message.error('网络异常')
             }
        },
           getWord(){//获取扫描模型

          
      },

        getModel(){//获取扫描模型
         this.$prompt('请输入任务Id', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
           window.open("http://192.168.137.1/#/h5/3dviewer?taskId="+value); 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }, 
    }
  }
</script>
